<html>
    <head>
        <title>HTML 文档结构</title>
        <link rel="stylesheer" href="index.css"/>

    </head>
    <body>
        <div class="main">
            <div class="row">
                <input class="input" type="text" id="inputtext"/>
                <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
                <input type="button" name="bt" id="button2" value="确认2"  />
            </div>
            <div id="todogroup">
            
            </div>

        </div>
    </body>
    <script lang="javascript">

        var intCnt=0;

        function init(){
            //console.log("xxx");
            document.getElementById("button2").onclick = handleClick;
           // console.log('xxxxxx');
        }

        function keyup(e){
            console.log(e);

            if(e.keyCode==13){
                handleClick();
            }
        }

        function handleClick(e){
            console.log('handleClick');
            console.log(e);

            //var temp = document.getElementById("inputtext");
           // console.log(temp.value);
            var temp = getValue();
           //document.getElementById("todogroup").innerHTML="<div>"+temp+"</div>"
            //document.getElementsByClassName("name")[0].style="background-color: #333333;";
            //var div=document.createElement('div');

            document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
                +intCnt+"'><input type='checkbox' name='todocheck'><div class='item-value'>"
                +temp+"<button class='item-del' type='button' onclick='deletByIndex("+intCnt+")'>删除</button></div>";
            document.getElementById("inputtext").value="";
            intCnt++;

            //var div=document.createElement('div');
            //div.innerText=temp;
            //document.getElementById("todogroup").append(div);
        }

        function getValue(){
            var temp=document.getElementById("inputtext");
            console.log(temp.value);

            return temp.value;
        }

        function deletByIndex(index){
            document.getElementById("todo"+index).remove();
        }
        init(); 
    </script>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .main{
            background-color:cornflowerblue;
            height: 200px;
        }
        .row{
            display: flex;
        }
        .item{
            display: flex;
            align-items:center;
            margin: 6px;
            padding: 3px;
            background-color:beige;
            border-radius: 4px;
        }
        .item-value{
            flex-grow:1;
            color:black;
        }
        .item-del{
            color:aliceblue;
            border: 0px;
            background-color:red;
            border-radius: 4px;
            opacity: 0;
        }
        .item:hover .item-del{
            opacity: 1;
        }

        .input{
            padding: 8px;
            outline: none;
            border: 2px solid beige;

        }

        .input:focus{
            box-shadow:0px 0px 10px blue;
            border:2px solid blue
        }
        .bt{
            border-radius:4px;
            border:2px solid rgb(255, 250, 250);
            background-color:rgb(255, 244, 228);

        }
    </style>
</html>
